<template>
  <!-- 游览路线的点位 -->
  <div class="tour-marker">
        <span class="marker">
            {{ index + 1 }}
        </span>
  </div>
</template>

<script>
export default {
  props: {
    spot: {
      type: Object,
      required: true
    },
    index: {
      type: Number
    },
    spots: { //所有点位
      type: Array,
      required: true
    }
  }
}
</script>

<style lang="scss" scoped>
$colorActive: #F4695A;

.tour-marker {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  .marker {
    position: relative;
    width: 22px;
    height: 22px;
    background-color: #fff;
    border: 1px solid $colorActive;
    color: $colorActive;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;

    &.active {
      background-color: $colorActive;
      color: #fff;
    }
  }
}

.info-win {
  background-color: #fff;
  position: absolute;
  width: 200px;
  max-height: 130px;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 8px;

  &::after {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translate3d(-50%, 100%, 0);
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 17px solid #fff;
  }
}

.buttons {
  height: 40px;
  border-top: 1px solid rgba(black, .1);
  display: flex;
  color: #353535;

  .btn {
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    position: relative;

    > i {
      color: #353535;
      font-size: 22px;
      margin-right: 5px;
    }

    &:first-of-type::after {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      height: 60%;
      transform: translateY(-50%);
      border-right: 1px solid rgba(black, .1);
    }
  }
}
</style>
